<script lang="ts" setup>
import { ElMessage } from "element-plus"
import { Pane, Splitpanes } from "splitpanes"
import { saveSimFile } from "@/common/apis/engine-library"
import { nextTick, ref, watch, onMounted } from "vue"
import { isEmpty } from "xe-utils"
import Catalog from "./catalog.vue"
import Editor from "./code-editor.vue"
import "splitpanes/dist/splitpanes.css"

interface Props {
  sim_engine_id: string | ''
}
const props = defineProps<Props>()
const leftSize = ref<number>(20)
const curCatalog = ref<any | undefined>()

function handleSave({ editValue, fn }: { editValue: any, fn: Function }) {
  if (isEmpty(curCatalog.value)) {
    ElMessage.warning("没有选择文件")
    return
  }
  const formData = new FormData()
  formData.append("file_id", (curCatalog.value as any).file_id)
  formData.append("content", editValue)
  saveSimFile(formData)
    .then((res) => {
      ElMessage.success(res.msg)
      fn(true)
    })
    .catch(() => {
      fn(false)
    })
}

onMounted(() => {
  // getSimEngineProjectDirApi(props.sim_engine_id).then(res => {
  // })
})

watch(
  () => props.sim_engine_id,
  () => {
    nextTick(() => {
      curCatalog.value = undefined
    })
  }
)
</script>

<template>
  <Splitpanes class="default-theme">
    <Pane v-model:size="leftSize" min-size="19.1184" max-size="35">
      <Catalog v-model:item="curCatalog" :sim_engine_id="props.sim_engine_id || ''" />
    </Pane>
    <Pane>
      <Editor
        :item="curCatalog"
        :readonly="true"
        :is-save-game="false"
        :no-header="false"
        @handle-save="handleSave"
      />
    </Pane>
  </Splitpanes>
</template>

<style lang="scss" scoped>
.default-theme {
  width: 100%;
  height: 100%;
}
.dark-blue .default-theme {
  background-color: var(--el-bg-color) !important;
}
:deep(.splitpanes.default-theme .splitpanes__pane) {
  background-color: var(--el-bg-color) !important;
}
:deep(.splitpanes.default-theme .splitpanes__splitter) {
  border-left: 1px solid transparent;
  background-color: transparent !important;
}
:deep(.splitpanes.default-theme .splitpanes__splitter:before) {
  background-color: var(--el-text-color-regular);
}
:deep(.splitpanes.default-theme .splitpanes__splitter:after) {
  background-color: var(--el-text-color-regular);
}
:deep(.splitpanes.default-theme .splitpanes__splitter) {
  background-color: var(--el-bg-color);
}
</style>
